<template>
    <div class="commend">
        <ul>
            <!-- comic_id -->
            <router-link tag="li" :to="/detailpage/ + i.comic_id" v-for="(i, ind) in list" :key="ind">
                <div class="img">
                    <img :src="i.img" alt="" />
                </div>
                <div class="box">
                    <span class="title">{{ i.title }}</span>

                    <div class="name">
                        <span class="type">{{ i.styles[0].name }}</span> <span class="num"><van-icon class="fire" name="fire" />{{ i.comment_total | myNum }}</span>
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
import { homeList } from "../request/index.js";
export default {
    data() {
        return {
            list: [],
        };
    },
    created() {
        this.getList();
    },
    filters: {
        myNum(x) {
            if (x > 10000) {
                let w = x / 10000;
                return w.toFixed(2) - 0 + "万";
            }
            return x + "万";
        },
    },
    methods: {
        getList() {
            homeList().then((data) => {
                this.list = data.data.list;
                // console.log(this.list);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.commend {
    margin-bottom: 3.4375rem;
    ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    li {
        box-sizing: border-box;
        width: 48%;

        margin-top: 0.9375rem;
        .box {
            padding: 0.125rem 0.25rem;
        }
        .title {
            font-size: 0.75rem;
            margin-top: 0.3125rem;
        }
        .name {
            margin-top: 0.3125rem;
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
        }
        .type {
            background-color: rgb(220, 220, 220, 0.5);
            border-radius: 0.125rem;
            padding: 0.125rem 0.3125rem;
            color: #a6a6a6;
        }

        .num {
            color: #a6a6a6;
            line-height: 1rem;
        }
        .fire {
            color: #ff7474;
        }
    }
    .img {
        width: 100%;
        height: 10rem;
        overflow: hidden;
        border-radius: 5px;
        img {
            height: 100%;
        }
    }
}
</style>
